<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城tailwindcss</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_2960521_rqz39d8moo.css"
    />
    <link rel="stylesheet" href="/dist/output.css" />
  </head>
  <body>
    <!-- 顶部导航 开始 -->
    <div class="bg-custom-gray h-40 text-custom-light-gray text-xs">
      <div class="w-1226 mx-auto clear-both">
        <ul class="float-left leading-10">
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">小米商城</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">MIUI</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">IoT</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">云服务</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">天星数科</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">有品</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">小爱开放平台</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">企业团购</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">资质证照</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">协议规则</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">下载app</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">智能生活</a></li>
          <li class="float-left"><a href="" class="px-7 py-0 hover:text-white">Select Location</a></li>
        </ul>
        <div class="float-right">
          <!-- 登录、注册、消息通知 -->
          <ul class="float-left leading-10">
            <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">登录</a></li>
            <li class="float-left"><a href="" class="px-7 py-0 border-r border-solid border-custom-gray hover:text-white">注册</a></li>
            <li class="float-left"><a href="" class="px-7 py-0 hover:text-white">消息通知</a></li>
          </ul>
          <!-- 购物车 -->
          <div class="float-left bg-custom-gray2 w-120 h-40 ml-13 relative group">
            <a href="" class="w-full h-full block text-center leading-10 group-hover:text-orange-500 group-hover:bg-white">
              <i class="iconfont i-car mr-1"></i>
              <span>购物车（0）</span>
            </a>
            <div class="bg-white w-320 h-100 absolute right-0 top-10 border border-solid border-gray-300 border-t-0 text-center leading-100 z-50 hidden group-hover:block">购物车中还没有商品，赶紧选购吧！</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

